<template>
    <div class="machine_item">
        <div class="title">{{title}}<span class="desc">{{desc}}</span></div>
        <div class="content">
        	<slot name="content"></slot>
        </div>
        <!-- <div class="footer">{{footer}}</div> -->
    </div>
</template>
<script>
	export default {
		props: {
			title: {
				type: String,
				default: '标题'
			},
			desc: {
				type: String,
				default: ''
			},
			footer: {
				type: String,
				default: ''
			}
		},
	}
</script>
<style>
	.machine_item {
	    border-radius: 3px;
	    overflow: hidden;
	    box-shadow: 1px 1px 5px #888;
	}
	.machine_item:hover {
		box-shadow: 1px 1px 5px rgba(76, 209, 55,.5);
	}
	.machine_item .title {
	    background-color: rgba(42, 88, 173,.8);
	    color: #fff;
	    padding-left: 10px;
	    height: 30px;
	    line-height: 30px;
	}
	.machine_item .content {
	    background-color: #fff;
	    padding-bottom: 10px;
	}
	.machine_item .desc {
		float: right;
		margin-right: 10px;
	}
	.machine_item .footer {
		height: 30px;
		line-height: 30px;
		background-color: rgba(42, 88, 173,.8);
		color: #fff;
		padding-left: 10px;
	}
</style>